
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="./reset.css" />
	<title>shopCar</title>
	<style type="text/css">
		.container{
			width: 100%;
			height: 100%;
		}
		.header{

			height: 0.9rem;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			text-align: center;
			align-items: center;

		}
		.name{
			flex: 1;
			font-size: 0.36rem;
		}
		.back_img{
			width: 0.28rem;
			margin-left: 0.18rem;
		}
		.dian_img{
			width: 0.45rem;
			height: 0.14rem;
			margin-right: 0.22rem;
		}
		.back_zi{
			font-size: 0.32rem;
			padding-bottom: 1rem;
		}
		.nav{
			width: 100%;
			height: 1rem;
			/*margin-top: 0.9rem;*/
			display: flex;
			align-items: center;
			border-bottom: 2px solid #f0f0f0;
		}
		.back_img2{
			width: 0.5rem;
			height: 0.55rem;
			margin-left: 0.13rem;
		}
		.name2{
			flex: 1;
			text-align: center;
			font-size: 0.3rem;
		}
		.footer{
			width: 100%;
			height: 1rem;
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			border-top: 1px solid #f1f1f1;
		}
		.left{
			flex: 1;
			line-height: 1rem;
		}
		.right{
			width: 2.25rem;
			background: #bfbfbf;
			text-align: center;
			font-size: 0.32rem;
			color: white;
			line-height: 1rem;
			/*align-items: center;*/
		}
		.price{
			margin-right: 0.22rem;
			color: #d01a1a;
			font-weight: bold;
			font-size: 0.18rem;
		}
		.price::before{
			content: "￥";
		}
		.left_l{
			float: left;
		}
		.left_r{
			float: right;
		}
		.yuan{
			display: inline-block;
			width: 0.38rem;
			height: 0.38rem;
			border-radius: 50%;
			border: 1px solid #efefef;
			margin-left: 0.26rem;
			margin-top: 0.28rem;
			margin-right: 0.15rem;
		}
		.all{
			font-size: 0.23rem;
			margin-top: -1rem;
		}
		.he{
			font-size: 0.23rem;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="header">
			<div class="back">
				<img src="./back.png" class="back_img" alt="" /><span class="back_zi">返回</span>
			</div>
			<span class="name">购物车</span>
			<img src="./dian.gif" class="dian_img" alt="" />
		</div>
		<div class="nav">
			<img src="./back.png" class="back_img2" alt="" /><span class="name2">购物车</span>
		</div>
		<div class="main"></div>
		<div class="footer">
			<div class="left">
				<div class="left_l">
					<span class="yuan"></span><span class="all">全选</span>
				</div>
				<div class="left_r">
					<span class="he">合计:</span><span class="price">0</span>
				</div>
			</div>
			<div class="right">去结算</div>
		</div>
	</div>
	<script src="./rem.js"></script>
</body>
</html>
